<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/common.js"></script>
    <title>Document</title>
</head>

<body>
    <p>
        <label for="">用户名</label>
        <input id="user" type="text">
        <span id="code_span"></span>
    </p>
    <p>
        <label for="">密&emsp;码</label>
        <input id="pwd" type="text">
        <span id="pwd_span"></span>
    </p>
    <p>
        <label for="">验证码</label>
        <input id="code" type="text">
        <span id="codeCreate">SFSF</span>
        <span id="code_span">×</span>

    </p>
    <p><button id="btn">注册</button></p>
</body>
<script>
    // [/u4e00-u9fa5]   0-127
    // 用户名不能为空  账号需要在6-12位之间  由数字，字母(大小写)，下划线,$ 组成,
    // 且不能以数字开头

    // 密码  需要在 6-12为之间  不能含有特殊字付
    // 验证码  随机数字，字母(大小写)  4位的
    var userInp = document.getElementById("user");
    var code_span = document.getElementById("code_span");
    var btn = document.getElementById("btn");
    // console.log(code_span, typeof code_span);
    console.dir(code_span);

    // // innerHTML , innerText
    // var code_span = document.getElementById("code_span");
    // // 获取
    // var html = code_span.innerHTML;  //可以设置或获取html结构
    // console.log(html);

    // var text = code_span.innerText; //可以设置或获取文本结构
    // console.log(text);

    // // 设置
    // // code_span.innerHTML = "<div><i style='color:red;'>我是i</i></div>";

    // code_span.innerText = "<div><i style='color:red;'>我是i</i></div>";

    var userList = ["a123123", "b123123"];//假数据   假设此数组中用户名已经存在
    btn.onclick = function () {
        var user = userInp.value;// ""
        if (user) {
            if (user.length >= 6 && user.length <= 12) {// 判断哟用户名长度是否合法
                var firstCode = user.charAt(0);  //获取首字符
                if (numList.indexOf(firstCode) == -1) { //判断firstCode 在numList中是否存在  ,存在说明以数字开头，不存在  说明是合法的;
                    var flag = true;  //假设  所有字符都是合法的
                    for (var i = 0; i < user.length; i++) {  //遍历用户名
                        var char = user.charAt(i);    //获取每一个字符  判断字符是否合法
                        if (allList.indexOf(char) == -1) { // allList 中存在即合法   不存在
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {//  flag == true  即所有字符合法

                        if (userList.indexOf(user) == -1) {  //判断当前用户名是否已经被注册   userList中存在注册，不存在则没有注册
                            // userList.push(user);
                            code_span.innerText = "√";
                            code_span.style.color = "green";
                            code_span.style.fontSize = "12px";
                        } else {
                            code_span.innerText = "您的用户名太受欢迎,请换一个";
                            code_span.style.color = "red";
                            code_span.style.fontSize = "12px";
                        }
                    } else {
                        code_span.innerText = "用户名中含有非法字符";
                        code_span.style.color = "red";
                        code_span.style.fontSize = "12px";
                    }
                } else {
                    code_span.innerText = "不能以数字开头...";
                    code_span.style.color = "red";
                    code_span.style.fontSize = "12px";

                }
            } else {
                // js 都是通过内联样式来控制元素的
                code_span.innerText = "用户名需要在6-12位之间";
                code_span.style.color = "red";
                code_span.style.fontSize = "12px";
            }
        }
    }
    
    </script>

</html>